<template>
  <div class="app-container">
    <div class="query">
      <el-input
        v-model="queryByID"
        placeholder="输入订单编号"
        clearable
      />
      <el-select v-model="value" placeholder="选择订单状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary">搜索</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="订单ID" width="95">
        <template  #default="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号">
        <template  #default="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>
      <el-table-column label="买方昵称">
        <template  #default="scope">
          {{ scope.row.buy_name }}
        </template>
      </el-table-column>
      <el-table-column label="买方电话">
        <template  #default="scope">
          {{ scope.row.buy_phone }}
        </template>
      </el-table-column>
      <el-table-column label="卖方昵称" align="center">
        <template  #default="scope">
          <span>{{ scope.row.sell }}</span>
        </template>
      </el-table-column>
      <el-table-column label="卖方电话">
        <template  #default="scope">
          {{ scope.row.sell_phone }}
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center">
        <template  #default="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址" align="center">
        <template  #default="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="订单状态" align="center">
        <template  #default="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="下单时间" width="200">
        <template  #default="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="操作"
        width="170"
        align="center"
      >
        <template  #default="scope">
          <el-button type="text">查看详情</el-button>
          <el-button type="text">关闭订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="list.length" />

  </div>
</template>

<script>
// import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [
        {
          order_id: 111,
          bookname: '小王子',
          price: 12.11,
          buy_name: '一个同学',
          buy_phone: '15288396213',
          status: '已取消',
          sell_phone: '15166672653',
          sell: '某某',
          time: '2020-11-14',
          address: '广西大学'
        },
        {
          order_id: 112,
          bookname: 'JavaScript高级程序设计',
          price: 12.11,
          buy_name: '壕',
          buy_phone: '15166672653',
          status: '待付款',
          sell_phone: '15288396213',
          sell: '一个同学',
          time: '2020-11-14',
          address: '广西大学'
        }
      ],
      options: [{
        value: '待付款',
        label: '待付款'
      }, {
        value: '已取消',
        label: '已取消'
      }, {
        value: '待发货',
        label: '待发货'
      }, {
        value: '已发货',
        label: '已发货'
      }, {
        value: '已收货',
        label: '已收货'
      }],
      status: ''
      // listLoading: true
    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    // fetchData() {
    //   this.listLoading = true
    //   getList().then(response => {
    //     this.list = response.data.items
    //     this.listLoading = false
    //   })
    // }
  }
}
</script>
<style scoped lang="scss">
  .query{
    display:flex;
    justify-self: start;
    margin-bottom: 20px;
    .el-input{
      margin-right:20px;
      width: 30%;
    }
    .el-select{
      margin-right:20px;
    }
  }
</style>
